<template>
    <div class="homeContent">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item) in img_list" :key="item.id">
                <a :href="item.url"><img :src="item.img" :alt="item.url"></a>
            </mt-swipe-item>
            
        </mt-swipe>

<!-- 六宮格 -->
    <!-- <ul class="mui-table-view mui-grid-view mui-grid-9 " >
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newsList">
                <img src="../images/menu1.png" alt="新闻资讯">
                <div class="mui-media-body">新闻资讯</div></router-link></li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photo_list/0">
                <img src="../images/menu2.png" alt="图片分享"><span class="mui-badge">5</span>
                <div class="mui-media-body">图片分享</div></router-link></li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodList">
                <img src="../images/menu3.png" alt="商品购买">
                <div class="mui-media-body">商品购买</div></router-link></li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../images/menu4.png" alt="留言反馈">
                <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
               <img src="../images/menu5.png" alt="视频专区">
                <div class="mui-media-body">视频专区</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../images/menu6.png" alt="联系我们">
                <div class="mui-media-body">联系我们</div></a></li>

	 </ul>  -->
		<!-- 新六宫格！ -->
        <van-grid clickable :column-num="3">
            <van-grid-item icon="fire" text="新闻资讯" to="/home/newsList"/>
            <van-grid-item icon="friends" text="图片分享" to="/home/photo_list/0"/>
            <van-grid-item icon="goods-collect" text="商品推荐" to="/home/goodList"/>
            <van-grid-item icon="comment" text="留言反馈" to="https://www.baidu.com"/>
            <van-grid-item icon="video" text="视频专区" to="/test"/>
            <van-grid-item icon="service" text="联系我们" to="/sku"/>
        </van-grid>

    </div>
</template>

<script>

import { Toast } from 'mint-ui';
export default {

    name:'home',
    data(){
        return{
            img_list:null
        }
    },
    methods:{
        getLunbotu(){
            this.$axios.get('api/getlunbo')
                .then(response => {
                    Toast({
                        message:"连接成功！",
                        duration:500
                    })
                    this.img_list =response.data.message;
    
                })
                .catch(function (error) { // 请求失败处理
                    Toast('链接失败。。请刷新重试。。')
                    console.log(error);

                })



               console.log(this.$axios({
                    method:"get",
                    url:'api/getlunbo'
                })) ;


        }

    },
    created(){
        this.getLunbotu();
       
    }
}
</script>
<style scoped lang='scss'>
.homeContent{
    margin-top: 50px;
    .mint-swipe{
        height: 200px;
        background-color: rebeccapurple;
    }
    .van-tabbar-item--active{
        color: #1989fa!important;
    }
    img{
        width:100%;
        height: 100%;
    }
    ul{
        font-size:5px;
    }

    .mui-grid-view, .mui-grid-9{
        background-color: white;
        
        img{
            height: 30px;
            width:30px;
        }

    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {

        border-right: 0;
        border-bottom:0;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        
        font-size: 8px ;
    }

}
</style>